<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>橘猫谷子柜 | 首页</title>
    <link
        rel="stylesheet"
        href="https://image-space.thebestxt.cc/website/css/ele-plus.css"
    />
    <!-- Import Vue 3 -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-zh-cn.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/vue3.js"></script>
    <!-- Import component library -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-icon.js"></script>

    <style>
        .el-header {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    </style>
</head>
<body>
    <el-container id="app">
        <el-header>橘猫谷子柜 | 首页</el-header>
        <el-main>
            <div v-for="(v, k) in users" :key="k">
                <el-link type="success" :href="`/goods/dashboard?user=${v.key}&page=1`">@{ v.icon } @{ v.label }</el-link>
            </div>
        </el-main>
    </el-container>
    <script>
        const { createApp, ref, onMounted, computed } = Vue
        const app = createApp({
            setup() {
                const users = ref(JSON.parse('{{ users | safe }}'))
                return {
                    users
                }
            }
        })
        app.config.compilerOptions.delimiters = ['@{', '}']
        app.use(ElementPlus)
        app.mount('#app')
    </script>
</body>
</html>